<template>
    <div >
        <van-area :area-list="areaList" 
        :title= 'cityInfo' 
        :visible-item-count=8
        @change = 'changeItemFn'
        @cancel= 'closeCityMaskFn'
        @confirm='selectAreaBtn'
        />
    </div>
</template>

<script>
import area from '../assets/area'
export default {
    name: 'selectArea',
    data(){
        return{
            msg:'选择城区组件',
            areaList:area,
            cityInfo:'请选择省市区',
        }
    },
    methods:{
        //改变城市选项时触发
        changeItemFn(_d){
            // console.log(_d.getValues())
            let _data=_d.getValues();
            this.cityInfo= _data[0].name+'-'+_data[1].name+'-'+_data[2].name
        },
        //点击取消关闭城市选项界面
        closeCityMaskFn(){
            // console.log('xx')
            this.$emit('closeAreaFn');
        },
        //确定选中城市
        selectAreaBtn(_d){
            // console.log(_d[1].name);
            this.$emit('closeAreaFn',_d[1].name)
        }
    }
  
}
</script>